<template>
	<view class="container">
		<!-- 搜索表单 -->
		<view class="query-content">
			<uni-forms ref="queryFormRef" :model="classId"  class="form-view">
				<view class="form-row">
					<uni-forms-item label="" name="classId" class="form-item" required>
						<uni-easyinput v-model="classId" placeholder="请输入班级ID" trim="true"></uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
			<button type="primary" class="button-round" @click="queryUserInfo">查 询</button>
		</view>
		<!-- 表头 -->
		<view class="table-header">
			<text class="header-cell">班级名称</text>
			<text class="header-cell">班级ID</text>
			<text class="header-cell">班主任</text>
			<text class="header-cell">联系电话</text>
			<text class="header-cell">电子邮件</text>
			<text class="header-cell">状态</text>
		</view>

		<!-- 班级信息 -->
		<view v-if="contactInfo" class="contact-item">
			<text class="contact-cell">{{ contactInfo.classesName }}</text>
			<text class="contact-cell">{{ contactInfo.classesId }}</text>
			<text class="contact-cell">{{ contactInfo.leader }}</text>
			<text class="contact-cell">{{ contactInfo.phone }}</text>
			<text class="contact-cell">{{ contactInfo.email }}</text>
			<text class="contact-cell">{{ contactInfo.status === '0' ? '激活' : '非激活' }}</text>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import classApi from '@/api/class.js'
	const classId = ref("");
	const queryFormRef = ref(null);
	const contactInfo = ref();

	const queryUserInfo = () => {
		queryFormRef.value.validate().then(res => {
			if (res) {
				console.log("验证通过classId -->", classId.value);
				classApi.getClassByClassId(classId.value).then(apiRes => {
					if (apiRes.code === 200) {
						console.log('根据班级ID获取班级信息信息成功', apiRes);
						contactInfo.value = apiRes.data;
					} else {
						// 提示不存在该班级
						uni.showToast({
							title: '不存在该班级',
							icon: 'none'
						});
					}
				})
			}

		}).catch(err => {
			console.error('表单验证失败', err);
			uni.showToast({
				title: '表单验证失败',
				icon: 'none'
			});
		});
	};
	
</script>

<style lang="scss">
	.container {
		padding: 30px;
	}

	.form-view {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.form-item {
		flex: 1;
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.button-round {
		border-radius: 999px; 
	}

	.contacts-list {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		padding: 10px;
	}

	.contact-item {
		display: flex; // 设置为flex布局，使子元素并排显示
		border-bottom: 1px solid #eee;
		padding: 10px 0;

		&:last-child {
			border-bottom: none;
		}
	}

	.contact-cell {
		flex: 1; // 每个单元格占据相同的空间
		text-align: center;
		padding: 10px; // 增加内边距，以便单元格之间有间隔
	}

	.contact-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.contact-name {
		font-size: 18px;
		font-weight: bold;
	}

	.contact-sex {
		font-size: 16px;
	}

	.contact-details {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}

	.contact-phone,
	.contact-email,
	.contact-class {
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.table-header {
		display: flex;
		background-color: #f0f0f0;
		padding: 10px;
		font-weight: bold;
	}

	.header-cell {
		flex: 1;
		text-align: center;
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	button {
		margin: 0 10px;
	}
</style>